<template>
  <div class="container">
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >数字车间</el-breadcrumb-item>
        <el-breadcrumb-item >设备列表</el-breadcrumb-item>
        <el-breadcrumb-item >设备01</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div style="width: 95%;margin: 0 auto;border-radius: 7px;">
      <el-container >
        <el-aside width="420px">
          <div class="image">
            <img :src="this.equipInfo.equipmentPic" alt />
          </div>
          <div class="line"></div>
          <div class="message">
            <p>类型：{{this.equipInfo.mode}}</p>
            <p>型号：{{this.equipInfo.equipmentId}}</p>
          </div>
          <div>
            <div class="optionBotton">
              <el-button
                type="primary"
                size="medium"
                @click="addEvent(item)"
                v-for="item in this.optionsKey"
                :key="item.operName"
                :style="{margin:5+'px'}" >
                  {{item.operName}}
                </el-button>
            </div>
<!--            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="10"> <el-button type="primary" plain size="medium">质量:高</el-button></el-col>
              <el-col :span="10"> <el-button type="primary" plain size="medium">质量:中</el-button></el-col>
            </el-row> -->
          </div>

          <div class="table-list" v-loading="eventLoading">
            <el-table class="equip" :data="OptionsRecods" stripe  style="width: 90%" :border="true" max-height="400">
              <el-table-column prop="eventDate" label="时间"  sortable></el-table-column>
              <el-table-column prop="eventName" label="事件"></el-table-column>
              <el-table-column prop="remark" label="备注"></el-table-column>
            </el-table>
          </div>
        </el-aside>
        <el-main>
          <div class="table" v-for="item in tempData" >
            <ChartTableTem :tempData="item" v-if="item.sensorType == 1 || item.sensorType ==  2"></ChartTableTem>
            <ChartTableFlow :flowData="item" v-if="item.sensorType == 3"></ChartTableFlow>
          </div>
        </el-main>
      </el-container>
    </div>


    <!-- 添加事件备注 -->
    <vxe-modal v-model="eventAddVisible" title="添加事件备注" width="450" resize destroy-on-close>
      <vxe-form :data="eventAddForm" title-align="right" title-width="100">
        <vxe-form-item title="备注:" field="remark" span="24" :item-render="{name: 'input', attrs: {placeholder: '请添加事件备注'}}"></vxe-form-item>
        <vxe-form-item align="right" span="24">
          <vxe-button type="submit" status="primary" @click="saveEvent">保存</vxe-button>
          <vxe-button @click="eventAddVisible = false">取消</vxe-button>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>
  </div>
</template>

<script>
import ChartTableFlow from "./ChartTableFlow";
import ChartTableTem from "./ChartTableTem";

import EquipEventApi from '@/api/equipEventApi'
import EquipTypeApi from '@/api/equipType'
export default {
  name: "EquipmentDetail",
  data() {
    return {
      // 设备id 传给charts
      equipmentId:'',
      // 操作键
      optionsKey:[],
      // 加载
      eventLoading:false,
      // 事件添加
      eventAddVisible:false,
      // 分页
      pageInfo:{
        // pageNo:1,
        pageSize:10,
        currentPage: 1,
        count:0
      },
      // 操作记录
      OptionsRecods: [],
      items: this.$store.state.breadData,

      // 事件添加form
      eventAddForm:{
        equipmentId:'',
        // eventDate:new Date()
        eventName:"",
        remark:''
      },
      equipInfo:{},
      // 温度数据
      tempData:[]
    };
  },
  components: {
    // Breadcrumb,
    ChartTableFlow,
    ChartTableTem
  },
  methods:{
    // 获取操作事件list
    getEquipEventOp(){
      this.eventLoading = true
      EquipEventApi.eEquipmentypeEventList(this.pageInfo,this.$route.params.equipname).then(res => {
        if(res.data.status === "200"){
          this.OptionsRecods = res.data.data.records.reverse()
          this.eventLoading = false
        }
      })
    },
    // 添加事件备注
    addEvent(item){
      this.eventAddVisible  = true
      this.eventAddForm.equipmentId = item.equipmentId
      this.eventAddForm.eventName = item.operName
    },
    // 保存事件
    saveEvent(){
      EquipEventApi.eEquipmentypeEventAdd(this.eventAddForm).then(res => {
        if(res.data.status === "200"){
          this.getEquipEventOp()
          this.eventAddVisible = false
        }
      })
    }
  },
  created() {
    // 获取url传过来的 equipmentid
    this.equipmentId = this.$route.params.equipname
    // 根据id获取设备信息
    EquipTypeApi.getEquipInfoById(this.equipmentId).then(res => {
      this.equipInfo = res.data.data
    })
    // 获取温度数据
    EquipTypeApi.getTemporData(this.equipmentId).then(res => {
      this.tempData = res.data.data
    })

    // 获取操作键
    EquipTypeApi.getEquipOption(this.equipmentId).then(res => {
      if(res.data.status === "200"){
        this.optionsKey = res.data.data.records
      }
    })
    // 操作事件
    this.getEquipEventOp()
  },
  mounted() {
    this.equipmentId = this.$route.params.equipname
  }
};
</script>
<style scoped lang="less">
.container {
  // width: 100vw;
  padding-left: 20px;
  background: rgba(243, 242, 242, 1);
}
.el-container {
  margin-top: 30px;
}
.el-aside {
  margin-right: 20px;
  padding-top: 30px;
  background: white;
  overflow: inherit;
  .image {
    width: 60%;
    // height: 30px;
    margin: auto;
    img {
      width: 100%;
      height: auto;
    }
  }
  .line {
    margin: 20px 0;
    border-bottom: 1px solid #d7d7d7;
  }
  .message {
    margin-left: 20px;
    p {
      line-height: 35px;
    }
  }
  .el-table {
    margin: 10px 20px;

    th > div.cell {
      text-align: center;
    }
  }
}
.el-main {
  padding: 0;
  padding-left: 20px;
  background: rgba(243, 242, 242, 1);
  .table {
    background: white;
    margin-bottom: 20px;
  }
}
.optionBotton{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 10px;
}
</style>
<style lang="less">
.equip {
  .cell {
    text-align: center;
  }
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
